

<template>        
    <div class="addFriend-container">

        <div class="tap-wrapper">

            <div class="tap-wrapper-info">

                <div class="tap-wrapper-info-add" v-bind:class="{'activateFriend':activateAddFriend}" @click="changeTap('activateFriend')"><span>添加好友</span></div>
                <div class="tap-wrapper-info-verify" v-bind:class="{'activateVerify':activateAddVerify}" @click="changeTap('activateVerify')" ><span>消息通知</span></div>

            </div>

        </div>

        <div class="tap-wrapper-result">

            <div class="tap-addFriend-wrapper" v-if="activateAddFriend">
                <div class="input-wrapper">
                    <el-input
                        v-model="inputForm.username"
                        style="width: 240px"
                        :placeholder="setPlaceholder(radioType)"
                    >
                        <template #append>
                                <el-button :icon="Search" @click="serarchUser"></el-button>
                        </template>
                    </el-input>

                    <div class="radio-wrapper">
                        <el-radio-group v-model="radioType" class="ml-4">
                            <el-radio value="1">用户名搜索</el-radio>
                            <el-radio value="2">用户ID搜索</el-radio>
                        </el-radio-group>
                    </div>
                    
                </div>
                <div class="content-wrapper">
                    <div class="content-wrapper-info">
                        <div class="content-userinfo-wrapper" v-for="searchUserInfo in friendList">
                            <FriendCard :friendInfo="searchUserInfo" @show-userinfo="showSonUserinfo" />
                        </div>
                    </div>
                
                    <div class="el-pagination-wrapper" v-if="showPageCom">
                        <el-pagination
                            size="small"
                            background
                            layout="prev, pager, next"
                            :total="50"
                            class="mt-4"
                            :page-size="2"
                            @size-change="pageChange(curretgPage)"
                            @current-change="pageChange(curretgPage)"
                            v-model:current-page="curretgPage"
                        />
                    </div>

                </div>

               

            </div>

            <div class="tap-verify-wrapper" v-if="activateAddVerify">
                <VerifyList/>
            </div>
        </div>
    </div>

    <el-dialog class="showSonUserInfo" v-model="showUserInfoDia">

        <div class="userino-wrapper">
            <UserinfoCard :imgurl="SonSendUserInfo.userImgUrl"/>
        </div>

        <template #footer>
        <div class="dialog-footer">
            <el-button @click="showUserInfoDia = false">关闭</el-button>
        </div>
        </template>

    </el-dialog>

</template>

<script setup>
import {ref,reactive,computed} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import FriendCard from "../components/FriendCard.vue"
import VerifyList from "../components/VerifyList.vue"
import UserinfoCard from "../components/UserinfoCard.vue"
const activateAddFriend = ref(true)
const activateAddVerify = ref(false)
const isShowApplyDia = ref(false)
const inputForm = reactive({
    username:"",
    userId:""
})

const friendList = ref([])
const searchUserInfo = reactive({
    userImgUrl:"",
    userName:"",
    userId:"",
    userPfofile:""
})
const radioType = ref('1')
const changeTap = (tapName)=>{
    if(tapName=="activateFriend"){
        activateAddFriend.value = true
        activateAddVerify.value = false
        showPageCom.value = false

    }else if(tapName=="activateVerify"){
        activateAddFriend.value = false
        activateAddVerify.value = true
        friendList.value = []
        radioType.value = "1"
        showPageCom.value = false
    }else{
        console.log("xxxxxx");
    }}

const setPlaceholder = (radioType)=> {
    console.log("setPlaceholder",radioType);
    if (radioType == "1"){
        return "请输入用户名"
    }else{
        return "请输入用户ID"
    }
}

const showPageCom = ref(false)

const serarchUser = ()=>{
    if(radioType.value=="1"){
        ElMessage({
            message: '根据用户名搜索:用户不存在',
            type: 'warning',
        })
        friendList.value = [
                {
                    userId : "6481596",
                    userName : "三咲智子",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/6481596?v=4&size=64",
                },{
                    userId : "20987775",
                    userName : "云游君",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/20987775?v=4&size=64",
                },{
                    userId : "293591",
                    userName : "Jeremy",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/293591?v=4&size=64",
                }
            ]
    }else{
        ElMessage({
            message: '根据用户名ID:用户存在.',
            type: 'success',
        })
        friendList.value = [
                {
                    userId : "6481596",
                    userName : "三咲智子",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/6481596?v=4&size=64",
                },{
                    userId : "20987775",
                    userName : "云游君",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/20987775?v=4&size=64",
                },{
                    userId : "293591",
                    userName : "Jeremy",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/293591?v=4&size=64",
                },{
                    userId : "44761321",
                    userName : "xiaoming",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/44761321?v=4&size=64",
                },{
                    userId : "20052395",
                    userName : "神楽坂みずき",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/20052395?v=4&size=64",
                },{
                    userId : "30518686",
                    userName : "justwiner",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/30518686?v=4&size=64",
                },{
                    userId : "30335393",
                    userName : "Jianjun Yu",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/30335393?v=4&size=64",
                },{
                    userId : "32354856",
                    userName : "YangLGggggggggg",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/32354856?v=4&size=64",
                },{
                    userId : "12124478",
                    userName : "Hades-li",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/12124478?v=4&size=64",
                },{
                    userId : "23313167",
                    userName : "류한경",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/23313167?v=4&size=64",
                },{
                    userId : "28420052",
                    userName : "张仕春",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/28420052?v=4&size=64",
                },{
                    userId : "46318880",
                    userName : "Delyan Haralanov",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/46318880?v=4&size=64",
                },{
                    userId : "839559",
                    userName : "zazzaz",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/839559?v=4&size=64",
                },{
                    userId : "42139754",
                    userName : "C.Y.Kun",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/42139754?v=4&size=64",
                },{
                    userId : "21104054",
                    userName : "一只前端汪",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/21104054?v=4&size=64",
                },{
                    userId : "21104054",
                    userName : "一只前端汪",
                    userPfofile : "是龙得盘着,是虎得卧着",
                    userImgUrl : "https://avatars.githubusercontent.com/u/21104054?v=4&size=64",
                }
            ]
    }
    showPageCom.value = true
}


const showUserInfoDia = ref(false)

const SonSendUserInfo = ref("")

const showSonUserinfo =(info) => {
    console.log("子组件让父组件展示用户信息",info);
    showUserInfoDia.value = true
    SonSendUserInfo.value = info.info
    console.log(SonSendUserInfo)
    console.log(SonSendUserInfo.value)

}


// ========================= 页码切换 ========================================
const curretgPage = ref(1)
const pageChange = (pageNum)=> {
    console.log("页码改变", pageNum);
}

const chooseImageUrl = ref("")


</script>

<style scoped lang="scss">
.addFriend-container{
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    padding: 5px;
    .tap-wrapper-info {
        display: flex;
        height: 30px;
        padding-left: 10px;
        // 文字居中对齐
        span {
            color:black;
            line-height: 30px;
            letter-spacing: 2px;
            font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
            font-size: 16px;
        }
        .tap-wrapper-info-add {
            width: auto;
            border-radius: 10%;
            padding-right: 10px;
            padding-left: 10px;
        }
        .tap-wrapper-info-verify {
            width: auto;
            margin-left: 10px;
            border-radius: 10%;
            padding-right: 10px;
            padding-left: 10px;
        }
        .activateFriend {
            background-color: #d9ecff;
        }
        .activateVerify{
            background-color: #d9ecff;
        }
    }
    .tap-wrapper-result{
        .tap-addFriend-wrapper{
            .input-wrapper{
                position: sticky;
                top: 0;
                margin-top: 10px;
                display: flex;
                margin-bottom: 50px;
                .radio-wrapper {
                    margin-left: 40px;
                }
            }
            // ===================== 布局从flex改为 grid
            .content-wrapper {
                height: 65vh;
                .content-wrapper-info{
                    width: 100%;
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-template-rows: 1fr 1fr 1fr 1fr;
                    grid-gap: 20px;
                    height: 95%;
                    .content-userinfo-wrapper{
                        background-color: beige;
                        height: 100%;
                        border-style:groove;
                        border-width: 1px;
                    }
                }
                .el-pagination-wrapper{
                    margin-top: 20px;
                    height: 5%;
                }
                
            }
        }
        .tap-verify-wrapper {
            height: 75vh;
        }
    }
}

 .showSonUserInfo {
    .userino-wrapper {
        height: 500px;
        display: flex;
        flex-direction:column;
        .imgCirlePart{
            height: 40%;
            // margin-top: 5%;
            // 子div水平垂直居中
            display: flex;
            align-items: center;
            justify-content: center;
            // 设置背景图片
            background-color:#d9ecff;
            // border: solid;
            .imgPartAvatar {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                img {
                    height: 100%;
                    width: 100%;
                }
            }
        }
        .infoPart{
            height: 60%;
            background-color: #F5F7FA;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            div{
                height: 20%;
                padding-top: 20px;
                padding-left: 20px;
            }
        }
    }
}

</style>